<template>
  <div class="indexpage">

<!-- 右侧：根据路由地址加载其他功能组件 -->
<div class="wrapper">

 <div class="table">
    <table align="center" border="1" cellpadding="0" cellspacing="0" borderColor="#d5d5d5" width="600">
      <thead>
        <tr>
          <th>时间</th>
          <th>登录者姓名</th>
          <th>登录账号</th>
        </tr>
      </thead>
      <tbody align="center">
        <tr>
          <td>{{ formattedTime }}</td>
          <td>{{ userInfo.username }}</td>
          <td>{{ userInfo.nickname }}</td>
        </tr>
      </tbody>
    </table>
  </div>


  <div id="building">

  </div>
</div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const userInfo = ref({
  nickname: '',
  username: ''
});
const formattedTime = ref('');

onMounted(() => {
  // 从localStorage获取用户数据
  const userData = localStorage.getItem('user');
  if (userData) {
    try {
      const parsedData = JSON.parse(userData);
      userInfo.value = {
        nickname: parsedData.nickname,
        username: parsedData.username, 
      };
      
      // 格式化当前时间
      const now = new Date();
      formattedTime.value = `${now.getFullYear()}-${padZero(now.getMonth() + 1)}-${padZero(now.getDate())} ${padZero(now.getHours())}:${padZero(now.getMinutes())}:${padZero(now.getSeconds())}`;
    } catch (error) {
      console.error('解析用户数据失败:', error);
    }
  }
});

// 补零函数
function padZero(num) {
  return num < 10 ? `0${num}` : num;
}
</script>

<style scoped>
.indexpage{
  width: 100%;
  height: 99vh;
  overflow: hidden;
}
.indexpage main{
  width: 100%;
  height: 80vh;
  display: flex;
}
.wrapper{
  background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), 
              url("../../assets/img/bj.jpg");
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
}
.table{
  padding-left: 20%;
  padding-top: 20%;
}
#building{
  opacity: 0.5;
}
</style>